<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <script src="common.js"></script>
    <div>
      <h1>《春娇与志明2》主角</h1>
      <ul class="ul" id="ul"></ul>
    </div>
    <script>
      //1.获取元素
      var ul = my$("ul");
      var list = ul.children;

      //2.动态获取数据循环输出
      var datas = ["杨幂", "余文乐", "杨千嬅", "黄晓明", "郑伊健"];
      for (var i = 0; i < datas.length; i++) {
        var li = document.createElement("li");
        ul.appendChild(li);
        li.innerText = datas[i];
      }

      //3.给ul添加点击事件
      //传入e事件对象
      ul.onclick = function (e) {
        console.log(e);
        for (var j = 0; j < datas.length; j++) {
          list[j].style.backgroundColor = "";
        }
        //通过事件函数中的e事件对象，找到点击事件原
        e.target.style.backgroundColor = "rgb(221, 215, 215)";
      };
    </script>
  </body>
</html>
